<template>
  <div class="home">
    <van-nav-bar title="科学队长" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <!-- <template #left>
        <van-icon name="search" size="18" />
      </template> -->
      <template #right>
        <!-- <van-icon name="search" size="18" /> -->
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <div class="home-wrap">
      <div class="logo-img-wrap">
        <div>
          <img class="img1" :src="LogoImg" />
        </div>
        <div>
          <img class="img2" :src="LogoImg2" />
        </div>
      </div>
      <div class="card-wrap">
        <div class="card card1">
          <div>已关闭</div>
          <div>
            <img class="card1-img" :src="SwithImg" />
          </div>
        </div>

        <div class="card card2">
          <div>
            <div>正在播放</div>
            <div>020.捉泥鳅.mp3</div>
          </div>
          <div>
            <img class="card2-img" :src="BackImg" />
            <img class="card2-img" :src="PlayImg" />
            <img class="card2-img" :src="NextImg" />
          </div>
        </div>

        <div class="card3-warp">
          <div class="card card3-1" @click="goWifiSet">
            <div>网络配置</div>
            <div>
              <img class="card3-img" :src="NetImg" />
            </div>
          </div>
          <div class="card card3-2">
            <div>电量</div>
            <div>
              <img class="card3-img" :src="PowerImg" />
            </div>
          </div>
        </div>

        <div class="card3-warp" v-show="upOrDown">
          <div class="card card3-1">
            <div>动感飞碟</div>
            <div>
              <img class="card3-img" :src="FeiDieImg" />
            </div>
          </div>
          <div class="card card3-2">
            <div>嘴巴控制</div>
            <div>
              <img class="card3-img" :src="MouseImg" />
            </div>
          </div>
        </div>
      </div>
      <div class="btn-up-and-down">
        <div class="btn-up-and-down-item" v-if="upOrDown" @click="upOrDown=false">
          <span class="btn-up-and-down-item-text">收起</span>
          <van-icon name="arrow-up" />
        </div>
        <div class="btn-up-and-down-item" v-else @click="upOrDown=true">
          <span class="btn-up-and-down-item-text">展开更多</span>
          <van-icon name="arrow-down" />
        </div>
      </div>

      <div class="content-recommend">
        <div class="content-recommend-title">内容推荐</div>
        <div>
          <img class="content-recommend-img" :src="RemonedImg">
        </div>
        <div class="content-recommend-title2" @click="goOnlineContent">在线内容</div>
      </div>
    </div>

  </div>
</template>

<script>

import { NavBar, Icon, Image } from 'vant';
import LogoImg from "@/assets/images/home/t838_shouye_guanji_normal.png"
import LogoImg2 from "@/assets/images/home/t838_shouye_logo_normal.png"
import SwithImg from "@/assets/images/home/t838_shouye_kaihuan_guan_noamal.png"
import PlayImg from "@/assets/images/home/t838_shouye_bofang_bo_normal.png"
import BackImg from "@/assets/images/home/t838_shouye_bofang_shang_normal.png"
import NextImg from "@/assets/images/home/t838_shouye_bofang_xia_normal.png"
import MouseImg from "@/assets/images/home/t838_shouye_zuiba_guan_noamal.png"
import PowerImg from "@/assets/images/home/t838_shouye_diangliang_0_noamal.png"
import FeiDieImg from "@/assets/images/home/t838_shouye_feidie_normal.png"
import NetImg from "@/assets/images/home/t838_shouye_peiwang_pressed.png"
import RemonedImg from "@/assets/images/home/t838_shouye_zaixian_normal.png"

export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Image.name]: Image,
  },
  data() {
    return {
      LogoImg,
      LogoImg2,
      SwithImg,
      PlayImg,
      BackImg,
      NextImg,
      MouseImg,
      PowerImg,
      FeiDieImg,
      NetImg,
      RemonedImg,
      upOrDown: true
    }

  },
  methods: {
    onClickLeft() {

    },
    onClickRight() {

    },
    goWifiSet() {
      this.$router.push({
        name: 'wifi-set'
      })
    },
    goOnlineContent(){
      this.$router.push({
        name:'online-content'
      })
    }
  }
};
</script>

<style lang="less">
.home {
  .home-wrap {
    padding: 0 16px;
    .logo-img-wrap {
      width: 100%;
      text-align: center;
      .img1 {
        width: 252px;
        height: 252.25px;
      }
      .img2 {
        width: 70px;
        height: 18px;
      }
    }
    .card-wrap {
      box-sizing: border-box;
      .card {
        background: #fff;
        font-size: 16.75px;
        padding: 10px 20px;
        border-radius: 10px;
      }
      .card1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        &-img {
          width: 60.75px;
          height: 60.75px;
        }
      }
      .card2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5.5px;
        &-img {
          width: 34.75px;
          height: 34.75px;
          margin-left: 5.5px;
        }
      }

      .card3-warp {
        display: flex;
        justify-content: space-between;
        margin-top: 5.5px;
        .card3-1 {
          flex: 1;
          margin-right: 5.5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .card3-2 {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .card3-img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .btn-up-and-down {
      font-size: 15px;
      margin: 11px 0;
      &-item {
        display: flex;
        justify-content: center;
        align-items: center;
        &-text {
          margin-right: 8px;
        }
      }
    }

    .content-recommend {
      margin-top: 16px;
      &-title {
        margin-bottom: 16px;
      }
      &-title2 {
        margin-bottom: 8px;
      }
      &-img {
        width: 160px;
        height: 90px;
      }
    }
  }
}
</style>
